<template>
  <div @click="handleButtonClick" class="floating-chat-button">
    <Avatar class="avatar" :size="64" />
    <div :style="dotStyle"></div>
    <ChatWindow v-if="chatVisible" @close="chatVisible = false" @connect="connected = true" @disconnect="connected = false" />
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { Avatar } from 'ant-design-vue';
import ChatWindow from './ChatWindow.vue';

export default {
  components: {
    Avatar,
    ChatWindow,
  },
  setup() {
    const chatVisible = ref(false);
    const connected = ref(false);

    const handleButtonClick = () => {
      chatVisible.value = !chatVisible.value;
    };

    const dotStyle = computed(() => ({
      bottom: '30px',
      width: '15px',
      height: '15px',
      position: 'fixed',
      borderRadius: '50%',
      display: 'inline-block',
      backgroundColor: connected.value ? 'red' : 'green',
    }));

    return {
      chatVisible,
      connected,
      handleButtonClick,
      dotStyle,
    };
  },
};
</script>

<style scoped>
.floating-chat-button {
  right: 40px;
  bottom: 30px;
  position: fixed;
}
</style>
